<ui:composition template="templateAdmin.xhtml"
	xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:p="http://primefaces.org/ui">
		
	<h:head></h:head>
	
	<ui:define name="subcategorias">
	
		<style>			
			.ui-widget-content { border: none; padding: 5px; }
			
			.ui-widget-content tr td { border: none; color: #00708C; font-family: 'Lato',sans-serif; }
			
			.ui-button { padding:0px; }
			
			/* Importante! es para que no muestre el nombre del tipo de elemento en los botones de primefaces */
			.ui-button-text { display: none; }
						
			/* Importante! es para que queden los iconos en los botones de primefaces */
			.ui-widget select, .ui-widget button { font-family: 'Glyphicons Halflings'; }
		</style>	
	
		<h:form id="form">		    
			             
			<h4>Nueva Subcategoria</h4>
			<div style="margin: 20px;">
				<div class="form-group">
					<div class="col-lg-3">
						<div class="input-group ">					
							<span class="input-group-addon">
								<span class="glyphicon glyphicon-filter"></span>
							</span>
							<h:selectOneMenu id="categoria" value="#{subcategoriaBean.categoria.nombre}" effect="fade"  styleClass="form-control" >
					            <f:selectItems value="#{subcategoriaBean.categorias}" var="categoria" 
					            			itemLabel="#{categoria.nombre}" itemValue="#{categoria.nombre}"/>
					        </h:selectOneMenu>
					    </div>
					</div>				
					<div class="col-lg-3">
						<div class="input-group ">					
							<span class="input-group-addon">
								<span class="glyphicon glyphicon-flag"></span>
							</span>
							<p:inputText label="Nombre" value="#{subcategoriaBean.subcategoria.nombre}"
										 required="true" placeholder="Nombre"
										 requiredMessage="Debe ingresar el nombre de la Subcategoria"
										 styleClass="form-control" />
						</div>
					</div>
					<div class="col-lg-5">
						<div class="input-group">
							<span class="input-group-addon">
								<span class="glyphicon glyphicon-tag"></span>
							</span>
							<p:inputText label="Descricpion " value="#{subcategoriaBean.subcategoria.descripcion}" 
										required="false" placeholder="Descripcion"
										styleClass="form-control"/>
						</div>
					</div>					
				</div>
				<p:commandButton id="regButton" 
		             actionListener="#{subcategoriaBean.postRegistroSubcategoria}"
		             update=":table:dataTable" process="@parent"
		             styleClass="btn btn-success glyphicon glyphicon-plus"/>
		             
			</div>
		
		</h:form>
		
		<h:form id="table">

			<h4>Subcategorias</h4>
		    <p:dataTable
		    			id="dataTable"
		    			var="subcategoria"
		    			value="#{subcategoriaBean.subcategorias}"
		    			editable="true"
		    			sortMode="multiple"
		    			styleClass="table">
		        		        
		        <p:ajax event="rowEdit" listener="#{subcategoriaBean.onEditSubcategoria}" update="msg" />		        
		        
		  		<p:column
		  				id="categoriaColumn"
		  				headerText="Categoria"
		  				sortBy="categoria.nombre"
		  				style="text-align:center; width:auto;">
					<p:cellEditor>
		                <f:facet name="output">
		            		<h:outputText value="#{subcategoria.categoria.nombre}" />
		                </f:facet>
		                <f:facet name="input">
		    				<h:selectOneMenu styleClass="dropdown" id="categoria" value="#{subcategoria.categoria.nombre}" effect="fade" >
					            <f:selectItems value="#{subcategoriaBean.categorias}" var="categoria" itemLabel="#{categoria.nombre}" 
					            			itemValue="#{categoria.nombre}"/>
					        </h:selectOneMenu>
		                </f:facet>
		            </p:cellEditor>
		        </p:column>
		        
		        <p:column
		        		id="nombre"
		        		sortBy="nombre"
		        		style="text-align:center; width:auto;"
		        		headerText="Nombre">
					<p:cellEditor>
		                <f:facet name="output">
		                    <h:outputText value="#{subcategoria.nombre}" />
		                </f:facet>
		                <f:facet name="input">
		                    <h:outputText value="#{subcategoria.nombre}" />
		                </f:facet>
		            </p:cellEditor>
		        </p:column>
		        
		        <p:column
		        		sortBy="descripcion"
		        		style="text-align:center; width:auto;"
		        		headerText="Descripcion">
					<p:cellEditor>
		                <f:facet name="output">  
		                    <h:outputText value="#{subcategoria.descripcion}" />  
		                </f:facet>
		                <f:facet name="input">
		                    <p:inputText value="#{subcategoria.descripcion}" itemValue="#{subcategoria.descripcion}" var="#{subcategoria.descripcion}" style="width:100%"/>  
		                </f:facet>
		            </p:cellEditor>
		        </p:column>
		        
		        <p:column style="text-align:center;" width="40">  
		            <p:rowEditor />  
		        </p:column>
		        
				<p:column style="text-align:center;" width="40">
					<p:growl id="msg" showDetail="false" life="2000"/>
				    <p:commandButton update="dataTable msg"
				    				styleClass="btn btn-danger btn-sm glyphicon glyphicon-trash"
				    				actionListener="#{subcategoriaBean.postEliminarSubcategoria(subcategoria.nombre)}">
				        <p:confirm header="Confirmacion" message="¿Seguro que desea eliminar la subcategoria? #{subcategoria.nombre}" icon="ui-icon-alert"/>
				    </p:commandButton>
				    <p:confirmDialog global="true" showEffect="fade" hideEffect="explode">
				        <p:commandButton value="Si" type="button" styleClass="ui-confirmdialog-yes" icon="ui-icon-check" />
				        <p:commandButton value="No" type="button" styleClass="ui-confirmdialog-no" icon="ui-icon-close"/>   
				    </p:confirmDialog>
				    
				</p:column>
				
		    </p:dataTable>

		    <p:blockUI block="dataTable" trigger="dataTable"><i class="fa fa-refresh fa-spin"></i></p:blockUI>
		    
		</h:form>  
	</ui:define>
</ui:composition>

